<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ordinary K</title>
<script src="__PUBLIC__/Home/ecshe_js/k/jq.js"></script>
<script src="__PUBLIC__/Home/ecshe_js/k/highstock.js"></script>
<style type="text/css">
body{margin: 0px auto;}
.k-line-select{position:absolute;right:10px;top:9px;z-index:1}
.k-line-select .out{border-right:1px solid #CCC}
.k-line-select .item{float:left;width:58px;line-height:20px;color:#d7d7d7;text-align:center;border:1px solid #545b68;background-color: #48505f;text-decoration:none;font-weight:300;margin-left:5px;}
.k-line-select .item.on{background-color:#4b4b4b;border-bottom-color:#FFF;}
.k-line-wrap{height:400px;margin:0 -15px;}
.k-line-select a{color:#323232;text-decoration:none;cursor:pointer;font-size:12px;border-radius:5px;}
.k-line-select a:hover,.k-line-select .cur{text-decoration:none;background-color:#4572a7;}
.bcur{background-color:#000003;}

g.highcharts-button{background-color: #48505f;}
g.highcharts-grid path {stroke-width: 0;}
g.highcharts-navigator{display: none;}
g.highcharts-scrollbar{display: none;}
g.highcharts-navigator-handle-left{display: none;}
g.highcharts-navigator-handle-right{display: none;}
g.highcharts-tooltip path{z-index: 10!important;}

g.highcharts-grid path{stroke-width:0;}

g.highcharts-axis path{display:none;}
.highcharts-point-up{fill:red;stroke:red;}
.highcharts-point-down{fill:green;stroke:green;}
</style>
</head>
<body>
	<div class="k-line-select">
		<div class="fr out">
			<div id="chart_time" style="float:left;">
				<a class="item" id="time_d" data-time="1440">1d</a>
				<a class="item" id="time_6h" data-time="360">6h</a>
				<a class="item" id="time_1h" data-time="60">1h</a>
				<a class="item" id="time_30m" data-time="30">30m</a>
				<a class="item" id="chart_15m" data-time="15">15m</a>
				<a class="item" id="chart_5m" data-time="5">5m</a>
			</div>
		</div>
	</div>
	<div id="paint_chart" style="margin: 0px auto;"></div>
	<script>
		var market="{$market}";
		var window_height=$(window).height();
		var data_time=$.cookies.get('chart_time_name');
		var goa=null;

		document.getElementById('paint_chart').style.height=$(window).height()+"px";
		$(window).resize(function(){
			document.location.reload();
		});
		$('#chart_screen').click(function(){
			if($.cookies.get('chart_screen')){
				$.cookies.set('chart_screen',null);
				window.history.go(-1);
			}else{
				$.cookies.set('chart_screen',1);
				document.location.reload();
				if(window!=top)
					top.location.href=window.location.href;
			}
		});
		if($.cookies.get('chart_time')){
			$('#chart_time > a').removeClass('cur');
		}else{
			$('#chart_15m').addClass("cur").siblings().removeClass("cur");
			$('#chart_time > a').removeClass('cur');
			$('#chart_15m').addClass('cur');
		}
		if($.cookies.get('chart_time_name')){
			$('#'+$.cookies.get('chart_time_name')).addClass('cur');

		}else{
			$.cookies.set('chart_time',5);
			$('#chart_5m').addClass('cur');
		}
		$("#chart_time > a").click(function(){
			$(this).addClass("cur").siblings().removeClass("cur");
			//data_time=$(this).attr('data-time');
			$.cookies.set('chart_time',$(this).attr('data-time'));
			$.cookies.set('chart_time_name',$(this).attr('id'));
			getTrendData();
		});
		if($.cookies.get('chart_theme')!='black'){
			$.cookies.set('chart_theme','white');
			$('#chart_black').removeClass('cur');
			$('#chart_white').addClass('cur');
		}else{
			$('#chart_white').removeClass('cur');
			$('#chart_black').addClass('cur');
		}
		$('#chart_white').click(function(){
			$.cookies.set('chart_theme','white');
			document.location.reload();
		});
		$('#chart_black').click(function(){
			$.cookies.set('chart_theme','black');
			document.location.reload();
		});
		function paintChart() {
			var chartData = arguments;
			
			Highcharts.setOptions({
				chart:{backgroundColor:'rgba(0,0,0,0)'},
				xAxis:{gridLineWidth:0,lineWidth:0,tickLength:0},
				yAxis:{gridLineWidth:0,lineWidth:0},
				zAxis:{gridLineWidth:0},
			});
			
			Highcharts.theme={colors:["#7cb5ec","#f7a35c","#90ee7e","#7798BF","#aaeeee","#ff0066","#eeaaee","#55BF3B","#DF5353","#7798BF","#aaeeee"],chart:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:1,y2:1},stops:[[0,'#2a2a2b'],[1,'#3e3e40']]},style:{fontFamily:"'Unica One', sans-serif"},plotBorderColor:'#606063'},title:{style:{color:'#E0E0E3',textTransform:'uppercase',fontSize:'20px'}},subtitle:{style:{color:'#E0E0E3',textTransform:'uppercase'}},xAxis:{gridLineColor:'#707073',labels:{style:{color:'#E0E0E3'}},lineColor:'#707073',minorGridLineColor:'#505053',tickColor:'#707073',title:{style:{color:'#A0A0A3'}}},yAxis:{gridLineColor:'#707073',labels:{style:{color:'#E0E0E3'}},lineColor:'#707073',minorGridLineColor:'#505053',tickColor:'#707073',tickWidth:1,title:{style:{color:'#A0A0A3'}}},tooltip:{backgroundColor:'rgba(0, 0, 0, 0.85)',style:{color:'#F0F0F0'}},plotOptions:{series:{dataLabels:{color:'#B0B0B3'},marker:{lineColor:'#333'}},boxplot:{fillColor:'#505053'},candlestick:{lineColor:'white'},errorbar:{color:'white'}},legend:{itemStyle:{color:'#E0E0E3'},itemHoverStyle:{color:'#FFF'},itemHiddenStyle:{color:'#606063'}},credits:{style:{color:'#666'}},labels:{style:{color:'#707073'}},drilldown:{activeAxisLabelStyle:{color:'#F0F0F3'},activeDataLabelStyle:{color:'#F0F0F3'}},navigation:{buttonOptions:{symbolStroke:'#DDDDDD',theme:{fill:'#505053'}}},rangeSelector:{buttonTheme:{fill:'#505053',stroke:'#000000',style:{color:'#CCC'},states:{hover:{fill:'#707073',stroke:'#000000',style:{color:'white'}},select:{fill:'#000003',stroke:'#000000',style:{color:'white'}}}},inputBoxBorderColor:'#505053',inputStyle:{backgroundColor:'#333',color:'silver'},labelStyle:{color:'silver'}},navigator:{handles:{backgroundColor:'#666',borderColor:'#AAA'},outlineColor:'#CCC',maskFill:'rgba(255,255,255,0.1)',series:{color:'#7798BF',lineColor:'#A6C7ED'},xAxis:{gridLineColor:'#505053'}},scrollbar:{barBackgroundColor:'#808083',barBorderColor:'#808083',buttonArrowColor:'#CCC',buttonBackgroundColor:'#606063',buttonBorderColor:'#606063',rifleColor:'#FFF',trackBackgroundColor:'#404043',trackBorderColor:'#404043'},legendBackgroundColor:'rgba(0, 0, 0, 0.5)',background2:'#505053',dataLabelsColor:'#B0B0B3',textColor:'#C0C0C0',contrastTextColor:'#F0F0F3',maskColor:'rgba(255,255,255,0.3)'};
			
			if ($.cookies.get('chart_theme') == 'black') {
				Highcharts.setOptions(Highcharts.theme);
			}
			
			Highcharts.setOptions({global:{useUTC:false},lang:{months:['{:L("一月")}','{:L("二月")}','{:L("三月")}','{:L("四月")}','{:L("五月")}','{:L("六月")}','{:L("七月")}','{:L("八月")}','{:L("九月")}','{:L("十月")}','{:L("十一月")}','{:L("十二月")}'],shortMonths:['{:L("一月")}','{:L("二月")}','{:L("三月")}','{:L("四月")}','{:L("五月")}','{:L("六月")}','{:L("七月")}','{:L("八月")}','{:L("九月")}','{:L("十月")}','{:L("十一月")}','{:L("十二月")}'],weekdays:['{:L("周日")}','{:L("周一")}','{:L("周二")}','{:L("周三")}','{:L("周四")}','{:L("周五")}','{:L("周六")}'],thousandsSep:'',rangeSelectorZoom:"Zoom",},rangeSelector:{buttons:[{type:'minute',count:60,text:'1h'},{type:'minute',count:120,text:'2h'},{type:'minute',count:360,text:'6h'},{type:'minute',count:720,text:'12h'},{type:'day',count:1,text:'1d'},{type:'week',count:1,text:'1w'},{type:'all',text:'all'}],selected:6,inputEnabled:false},credits:{enabled:false},});

			chartData.callee.chart = new Highcharts.StockChart({chart:{renderTo:'paint_chart',animation:Highcharts.svg},title:{text:""},yAxis:[{labels:{style:{color:'#888'},x:0,align:'left'},title:{text:'{:L("价格")}',style:{color:'#888'},margin:15},offset:35,height:window_height/100*42,opposite:false,lineWidth:2,gridLineDashStyle:'Dash',showLastLabel:true},{labels:{style:{color:'#4f8ad0'},x:0,align:'left'},title:{text:'{:L("成交量")}',style:{color:'#4f8ad0'},margin:15},offset:35,top:window_height/100*65,height:window_height/100*15,opposite:false,lineWidth:2,gridLineDashStyle:'Dash',showLastLabel:true}],xAxis:{type:'datetime'},plotOptions:{candlestick:{color:'#0ab92b',lineColor:'green',upColor:'#dd2121',upLineColor:'red'}},tooltip:{crosshairs:[true,true],shared:true,xDateFormat:'%Y-%m-%d %H:%M %A',color:'#f0f',borderColor:'#058dc7'},series:[{animation:false,name:'{:L("价格")}',type:'candlestick',data:[]},{animation:false,name:'{:L("成交量")}',type:'column',color:'#4572A7',yAxis:1,data:[],tooltip:{valueDecimals:4}},{animation:false,name:'{:L("05均线")}',type:'spline',color:'#FF00FF',data:[],threshold:null,lineWidth:1,tooltip:{valueDecimals:6}},{animation:false,name:'{:L("20均线")}',type:'spline',color:'#450fff',data:[],threshold:null,lineWidth:1,tooltip:{valueDecimals:6}}]});
		}

		function getTrendData(){
			var time=$.cookies.get('chart_time');	
			$.get("/Chart/getMarketOrdinaryJson?market="+market+"&time="+time+"&t="+(new Date("").getTime()),function(data){
				if(data){
					var rates=[],vols=[],temp5=[],temp20=[],num;
					var a5;
					var a20;

					for(i=0;i<data.length;i++){
						rates.push([Math.round(data[i][0]*1000),parseFloat(data[i][2]),parseFloat(data[i][3]),parseFloat(data[i][4]),parseFloat(data[i][5])]);
						vols.push([Math.round(data[i][0]*1000),parseFloat(data[i][1])]);
						if(i>4){
							a5=parseFloat(((parseFloat(data[i][4])+parseFloat(data[i-1][4])+parseFloat(data[i-2][4])+parseFloat(data[i-3][4])+parseFloat(data[i-4][4])+parseFloat(data[i][3])+parseFloat(data[i-1][3])+parseFloat(data[i-2][3])+parseFloat(data[i-3][3])+parseFloat(data[i-4][3]))/10).toFixed(6));

							temp5.push([Math.round(data[i][0]*1000),a5]);

						}
						if(i>19){
							a20=parseFloat(((parseFloat(data[i][4])+parseFloat(data[i-1][4])+parseFloat(data[i-2][4])+parseFloat(data[i-3][4])+parseFloat(data[i-4][4])+parseFloat(data[i-5][4])+parseFloat(data[i-6][4])+parseFloat(data[i-7][4])+parseFloat(data[i-8][4])+parseFloat(data[i-9][4])+parseFloat(data[i-10][4])+parseFloat(data[i-11][4])+parseFloat(data[i-12][4])+parseFloat(data[i-13][4])+parseFloat(data[i-14][4])+parseFloat(data[i-15][4])+parseFloat(data[i-16][4])+parseFloat(data[i-17][4])+parseFloat(data[i-18][4])+parseFloat(data[i-19][4])+parseFloat(data[i][3])+parseFloat(data[i-1][3])+parseFloat(data[i-2][3])+parseFloat(data[i-3][3])+parseFloat(data[i-4][3])+parseFloat(data[i-5][3])+parseFloat(data[i-6][3])+parseFloat(data[i-7][3])+parseFloat(data[i-8][3])+parseFloat(data[i-9][3])
							+parseFloat(data[i-10][3])+parseFloat(data[i-11][3])+parseFloat(data[i-12][3])+parseFloat(data[i-13][3])+parseFloat(data[i-14][3])+parseFloat(data[i-15][3])+parseFloat(data[i-16][3])+parseFloat(data[i-17][3])+parseFloat(data[i-18][3])+parseFloat(data[i-19][3]))/40).toFixed(6))

							temp20.push([Math.round(data[i][0]*1000),a20]);
						}
					}

					paintChart.chart.series[0].setData(rates);
					paintChart.chart.series[1].setData(vols);
					paintChart.chart.series[2].setData(temp5);
					paintChart.chart.series[3].setData(temp20);
					paintChart.chart.redraw();
				}
			},"json");
			clearInterval(goa);
			
			var wait=second=5;
			goa=setInterval(function(){
				wait--;
				if(wait<0){
					clearInterval(goa);
					getTrendData();
					wait=second;
				}
			},1000);
		}
		$(function(){
			paintChart();
			getTrendData();
		});
	</script>
	<script type="text/javascript">
		function clickIE4(){
			if(event.button==2){
				return false;
			}
		}
		function clickNS4(e){
			if(document.layers||document.getElementById&&!document.all){
				if(e.which==2||e.which==3){
					return false;
				}
			}
		}
		function OnDeny(){
			if(event.ctrlKey||event.keyCode==78&&event.ctrlKey||event.altKey||event.altKey&&event.keyCode==115){
				return false;
			}
		}
		if(document.layers){
			document.captureEvents(Event.MOUSEDOWN);
			document.onmousedown=clickNS4;
			document.onkeydown=OnDeny();
		}else
			if(document.all&&!document.getElementById){
				document.onmousedown=clickIE4;
				document.onkeydown=OnDeny();
			}
		document.oncontextmenu=new Function("return false");
	</script>
</body>
</html>